<template>
  <div class="chat">
    <div class="chat-wrap">
      <ChatCore
        :showBtnList="true"
        :chatId="currentChatID"
        :userAutoMsg="userAutoMsg"
        :webAccess="webAccess"
        @newChat="addNewChat"
        v-if="chatCoreVisible"
      />
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  h,
  onBeforeUnmount,
  createVNode,
  nextTick,
} from "vue";
import request from "../../common/utils/request";
import store from "../../store/index";
import { useRoute, useRouter } from "vue-router";
import utils from "../../common/utils/utils";
import { Modal, notification, message } from "ant-design-vue";
import { DoubleLeftOutlined } from "@ant-design/icons-vue";
import ChatCore from "../../components/ChatCore/index.vue";
export default defineComponent({
  name: "Chat",
  components: { ChatCore },

  setup() {
    const route = useRoute();
    const router = useRouter();

    const state = reactive({
      currentChatID: route.query.chat_id || '', //聊天组件使用的chat_id
      userAutoMsg: route.query.message || '',
      chatCoreVisible: true,
      webAccess: false,
    });

    const addNewChat = () => {
      state.chatCoreVisible = false;
      state.currentChatID = null;
      state.userAutoMsg = "";
      nextTick(() => {
        state.chatCoreVisible = true;
      });
    };

    const getAiConfig = () => {
      request.get("/work_ai", "/config").then((res) => {
        if (res.list) {
          state.webAccess = res.list.web_search == '1'
        }
      });
    };

    getAiConfig();

    return {
      ...toRefs(state),
      addNewChat,
    };
  },
});
</script>

<style lang="less" scoped>
.chat {
  width: 100%;
  height: 100%;
  display: flex;

  .chat-wrap {
    width: 100%;
    height: 100%;
    padding: 20px;
  }
}
</style>
